<script setup lang="ts">
import router from '../router'
import { RouterView } from 'vue-router'
import { onMounted } from 'vue'

const step1 = () => {
  router.push('/online/online1')
}
const step2 = () => {
  router.push('/online/online2')
}
const step3 = () => {
  router.push('/online/online3')
}

onMounted(() => {
})
</script>

<template>
  <div class="container bg-blue-100 grid grid-cols-10">
    <div class="col-span-1 bg-green-100">
      <ul>
        <li @click="step1()" class="step hover:bg-green-300 py-2"><a>第一步</a></li>
        <li @click="step2()" class="step hover:bg-green-300 py-2"><a>第二步</a></li>
        <li @click="step3()" class="step hover:bg-green-300 py-2"><a>第三步</a></li>
      </ul>
    </div>
    <div class="bg-red-200 col-span-9">
      <RouterView style="max-width: 8000px" />
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.step {
  border-bottom: black 2px solid;
  text-align: center;
  cursor: pointer;
}
</style>